<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第四关</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            /* 自动适应列宽 */
            gap: 10px;
            /* 列之间的间隔 */
            background: url("img/index.png");
        }


        #plane-explosion {
            position: absolute;
            width: 64px;
            height: 64px;
            background-image: url(/img/精灵图/flash5_64x64x4x2.png);
            display: none;
        }

        .explode-animation {
            animation: explode-animation 1s steps(8) infinite;
        }

        @keyframes explode-animation {
            from {
                background-position: 0 0;
            }

            to {
                background-position: -512px 0;
            }
        }





        .bomb-explosion {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            animation: explosionAnimation 0.3s;
            z-index: 9999;
        }

        @keyframes explosionAnimation {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }




        .animation {
            width: 25px;
            height: 25px;
            background-image: url("/img/精灵图/jetfire.png");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            left: 0;
            top: 0;
            animation: spriteAnimation 1s steps(14) infinite;
        }

        @keyframes spriteAnimation {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -350px 0;
                /* 假设每个精灵图的宽度为25px，总共14张图 */
            }
        }

        #main {
            width: 600px;
            height: 910px;
            background: url("img/第三关背景.png");
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        #titleScore {
            margin-top: 50px;
            margin-left: 120px;
            font-size: 24px;

        }

        #stopgame {
            margin-left: 400px;
            margin-top: 80px;
        }


        #grade1 {
            margin-left: 380px;
            margin-top: 50px;
            font-size: 20px;
        }

        #stop {
            width: 400px;
            height: 400px;
            padding-top: 200px;
            position: absolute;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.6);
            left: 50%;
            margin-left: -200px;
            top: 100px;
            display: none;
        }

        #menu {
            width: 400px;
            height: 400px;
            padding-top: 200px;
            position: absolute;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.6);
            left: 50%;
            margin-left: -200px;
            top: 100px;
            display: none;
        }

        #menu2 {
            width: 400px;
            height: 400px;
            padding-top: 200px;
            position: absolute;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.6);
            left: 50%;
            margin-left: -200px;
            top: 100px;
            display: none;
        }

        .button {
            width: 150px;
            height: 50px;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.6);
            text-align: center;
            line-height: 50px;
            border-radius: 20px;
            font-size: 20px;
            font-weight: bolder;
            margin: 0 auto;
            margin-top: 10px;
            cursor: pointer;
        }

        #bgMusic {
            margin-top: 600px;
        }

        .right {
            display: flex;
            flex-direction: column;
            /* 纵向排列 */
        }

        .img {
            margin-top: 50px;
            margin-left: 100px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">

            <div id="stopgame" onclick="mystopgame()"><img src="img/按钮及图标/暂停图标.png"></img></div>
            <div id="grade1">分数：<span id="grade">0</span></div>
            <div id="grade1">关卡：<span>Ⅳ</span>

            </div>

        </div>

        <div id="main">
            <div id="stop">
                <div class="button" onclick="continuegame()">继续游戏</div>
                <div class="button" onclick="newgame()">新的游戏</div>
                <div class="button" onclick="closegame()">返回主菜单</div>
            </div>
            <div id="menu">
                <div class="button">失败！</div>
                <div class="button" onclick="newgame()">重新开始</div>
                <div class="button" onclick="closegame()">返回主菜单</div>
            </div>
            <div id="menu2">
                <div class="button">成功！</div>
                <div class="button" onclick="nextGame()">下一关！</div>
                <div class="button" onclick="newgame()">重新开始</div>
                <div class="button" onclick="closegame()">返回主菜单</div>
            </div>
            <div class="animation"></div>
            <div id="plane-explosion"></div>


        </div>

        <div class="right">
            <img class="img" src="img/yinyue.png" onclick="playAudio()"></img>
            <div id="titleScore">血量：<img src="img/按钮及图标/我方生命图标.png"> X <span id="playerBooldy">10</span></img></div>
            <div id="titleScore">炸弹：<img src="img/按钮及图标/我方炸弹图标.png"> X <span id="bom">3</span></img></div>
        </div>
    </div>

    <audio src="./audio/背景音乐/背景音乐1.mp3" id="startbgMusic"></audio>
    <audio src="audio/音效/我方子弹音效.wav" id="shootMusic"></audio>
    <audio src="audio/音效/主人公炸弹音效.wav" id="boom"></audio>
    <audio src="audio/音效/爆炸音效.mp3" id="bao"></audio>
    <script>
        // 最高分
        var grade = document.getElementById("grade");
        var grade4Max = localStorage.getItem('grade4Max');
        var grade4Second = localStorage.getItem('grade4Second');
        var grade4Three = localStorage.getItem('grade4Three');

        // 退出到主菜单
        function closegame() {
            window.location.href = "index.html";
        }

        // 下一关
        function nextGame() {
            window.location.href = "plane5.html";
        }



        // 父容器
        var mainObj = document.getElementById("main");

        // 地方小飞机数组
        var smallPlaneArray = [];



        // 己方主角子弹数组
        var bulletArray = [];

        // 敌方主角子弹数组
        var bulletArray1 = [];

        // 道具数组
        var propArray = [];

        // 定义标识变量
        var upBtn = false;
        var downBtn = false;
        var rightBtn = false;
        var leftBtn = false;
        var konggeBtn = false;

        // 主角子弹等级
        var shootGrade = 1;

        // 积分
        var grade = document.getElementById("grade");

        // 音乐
        var startbgMusic = document.getElementById("startbgMusic");
        var shootMusic = document.getElementById("shootMusic");
        var boom = document.getElementById("boom");
        var bao = document.getElementById("bao");

        function playAudio() {
            if (startbgMusic.paused) {
                startbgMusic.play();
            } else {
                startbgMusic.pause();
                startbgMusic.currentTime = 0;
            }
        }


        // 在游戏逻辑中触发炸弹屏闪效果
        function triggerBombExplosion() {
            var container = document.getElementById('main');
            var explosion = document.createElement('div');
            explosion.className = 'bomb-explosion';
            container.appendChild(explosion);

            setTimeout(function () {
                container.removeChild(explosion);
            }, 500); // 500毫秒后移除屏闪效果
        }

        var explosion = document.getElementById('plane-explosion');

        function explode() {
            explosion.style.display = 'block'; // 显示精灵图
            explosion.classList.add('explode-animation');

            setTimeout(function () {
                explosion.style.display = 'none'; // 隐藏精灵图
            }, 1000); // 一秒后隐藏精灵图
        }

        function reset() {
            explosion.classList.remove('explode-animation');
            void explosion.offsetWidth; // 强制重绘
            explosion.classList.add('explode-animation');
        }

        function changePosition(x, y) {
            explosion.style.transform = `translate(${x}px, ${y}px)`;
        }


        // 标识是否开启boss战 
        var isFunctionExecuted = false;

        // 标识是否开启boss战 
        var isstop = false;


        // 主角血量
        var playerBooldy = document.getElementById("playerBooldy");

        // 炸弹
        var bom = document.getElementById("bom");

        // boss血量
        var bossBloody = 180;

        // 定时任务，2秒生成一个杂兵1
        var smallPlane1Timer = setInterval(createSamllPlane1, 2000)//生成杂兵1定时
        // 定时任务，5秒生成一个杂兵1
        var smallPlane2Timer = setInterval(createSamllPlane2, 5000)//生成杂兵2定时
        // 定时任务，6秒生成一个杂兵N1
        var smallPlaneN1Timer = setInterval(createSamllPlaneN1, 5000)//生成杂兵n1定时
        // 定时任务，8秒生成一个杂兵N1
        var smallPlaneN2Timer = setInterval(createSamllPlaneN2, 8000)//生成杂兵n2定时


        var smallPlane3Timer = setInterval(createSamllPlane3, 9000)
        var smallPlane4Timer = setInterval(createSamllPlane4, 11000)
        var smallPlane5Timer = setInterval(createSamllPlane5, 12000)

        // 定时任务20ms刷新一次杂兵位置
        var smallPlaneMoveTimer = setInterval(smallPlaneMove, 20)//杂兵1移动

        // 定时任务，20毫秒监听一次键盘
        var ctrlPlayTimer = setInterval(ctrlPlay, 20)//键盘监听

        // 定时调用子弹移动函数刷新子弹轨迹
        var bulletMoveTimer = setInterval(bulletMove, 10);// 子弹移动

        // 定时调用子弹移动函数刷新子弹轨迹
        var bulletMove1Timer = setInterval(bulletMove1, 10);// 子弹移动

        // 定时任务主角射击子弹
        var shootTimer = setInterval(() => {
            if (shootGrade == 1) {
                shootMusic.play();
                player.shoot();
            }
            if (shootGrade == 2) {
                shootMusic.play();

                player.shoot2();
            }
            if (shootGrade == 3) {
                shootMusic.play();

                player.shoot3();
            }
            if (shootGrade == 4) {
                shootMusic.play();

                player.shoot4();
            }
        }, 300)



        // 每隔20ms刷新一下碰撞
        var bulletCrash1 = setInterval(crashCheck, 5)//子弹与杂兵1碰撞

        //定时任务己方主角与杂兵1碰撞检测执行
        var crash1 = setInterval(() => {
            player.crashForOurAnd1();
        }, 20)

        // 定时任务，15秒生成一个道具1
        var prop1Timer = setInterval(createProp1, 15000)
        // 定时任务，25秒生成一个道具2
        var prop2Timer = setInterval(createProp2, 25000)
        // 定时任务，30秒生成一个道具3
        var prop3Timer = setInterval(createProp3, 30000)
        // 定时任务，40秒生成一个道具4
        var prop4Timer = setInterval(createProp4, 40000)

        // 道具移动
        var propMoveTimer = setInterval(propMove, 10)


        // 界面
        var stop = document.getElementById("stop");

        // 暂停按钮点击方法，展示stop页面
        function mystopgame() {

            stop.style.display = "block";
            isstop = true;
            // 暂停道具创建移动
            clearInterval(prop1Timer);
            clearInterval(prop2Timer);
            clearInterval(prop3Timer);
            clearInterval(prop4Timer);
            clearInterval(propMoveTimer);

            // 暂停创建敌方飞机1的创建
            clearInterval(smallPlane1Timer);
            // 暂停创建敌方飞机2的创建
            clearInterval(smallPlane2Timer);
            clearInterval(smallPlaneN1Timer);
            clearInterval(smallPlaneN2Timer);
            clearInterval(smallPlane3Timer);
            clearInterval(smallPlane4Timer);
            // 暂停敌方飞机的运动
            clearInterval(smallPlaneMoveTimer);
            // 暂停敌方飞机的子弹移动

            clearInterval(bulletMove1Timer);
            // 暂停键盘监听
            clearInterval(ctrlPlayTimer);
            // 暂停子弹移动
            clearInterval(bulletMoveTimer);
            // 暂停主角子弹射击
            clearInterval(shootTimer);

            // 暂停子弹与杂兵1碰撞检测
            clearInterval(bulletCrash1);
            // 暂停主角与杂兵1碰撞检测
            clearInterval(crash1);


            // 暂停音乐音效

            startbgMusic.pause();
            shootMusic.pause();




        }

        // 继续游戏
        function continuegame() {
            stop.style.display = "none";
            isstop = false;

            if (isFunctionExecuted == false) {

                startbgMusic.play();

                // 开启道具创建移动
                prop1Timer = setInterval(createProp1, 15000);
                prop2Timer = setInterval(createProp2, 25000);
                prop3Timer = setInterval(createProp3, 30000);
                prop4Timer = setInterval(createProp4, 40000);
                propMoveTimer = setInterval(propMove, 10)

                // 定时任务，2秒生成一个杂兵1
                smallPlane1Timer = setInterval(createSamllPlane1, 2000)//生成杂兵1定时
                // 定时任务，5秒生成一个杂兵2
                smallPlane2Timer = setInterval(createSamllPlane2, 5000)

                smallPlaneN1Timer = setInterval(createSamllPlaneN1, 5000)
                smallPlaneN2Timer = setInterval(createSamllPlaneN2, 8000)
                smallPlane3Timer = setInterval(createSamllPlane3, 9000)
                smallPlane4Timer = setInterval(createSamllPlane4, 11000)
                smallPlane5Timer = setInterval(createSamllPlane5, 12000)
                // 定时任务20ms刷新一次杂兵位置
                smallPlaneMoveTimer = setInterval(smallPlaneMove, 20)//杂兵1移动

                // 定时任务，20毫秒监听一次键盘
                ctrlPlayTimer = setInterval(ctrlPlay, 20)//键盘监听

                // 定时调用子弹移动函数刷新子弹轨迹
                bulletMoveTimer = setInterval(bulletMove, 10);// 子弹移动
                // 定时调用子弹移动函数刷新子弹轨迹
                bulletMove1Timer = setInterval(bulletMove1, 10);// 子弹移动

                // 定时任务主角射击子弹
                shootTimer = setInterval(() => {
                    if (shootGrade == 1) {
                        shootMusic.play();
                        player.shoot();
                    }
                    if (shootGrade == 2) {
                        shootMusic.play();

                        player.shoot2();
                    }
                    if (shootGrade == 3) {
                        shootMusic.play();

                        player.shoot3();
                    }
                    if (shootGrade == 4) {
                        shootMusic.play();

                        player.shoot4();
                    }
                }, 300)

                // 每隔20ms刷新一下碰撞
                bulletCrash1 = setInterval(crashCheck, 10)//子弹与杂兵1碰撞

                //定时任务己方主角与杂兵1碰撞检测执行
                crash1 = setInterval(() => {
                    player.crashForOurAnd1();
                }, 20)
            }

            if (isFunctionExecuted == true) {

                startbgMusic.play();
                // 开启道具创建移动
                prop1Timer = setInterval(createProp1, 15000);
                prop2Timer = setInterval(createProp2, 25000);
                prop3Timer = setInterval(createProp3, 30000);
                prop4Timer = setInterval(createProp4, 40000);
                propMoveTimer = setInterval(propMove, 10)


                // 定时任务20ms刷新一次杂兵位置
                smallPlaneMoveTimer = setInterval(smallPlaneMove, 20)//杂兵1移动

                // 定时任务，20毫秒监听一次键盘
                ctrlPlayTimer = setInterval(ctrlPlay, 20)//键盘监听

                // 定时调用子弹移动函数刷新子弹轨迹
                bulletMoveTimer = setInterval(bulletMove, 10);// 子弹移动
                // 定时调用子弹移动函数刷新子弹轨迹
                bulletMove1Timer = setInterval(bulletMove1, 10);// 子弹移动

                // 定时任务主角射击子弹
                shootTimer = setInterval(() => {
                    if (shootGrade == 1) {
                        shootMusic.play();
                        player.shoot();
                    }
                    if (shootGrade == 2) {
                        shootMusic.play();

                        player.shoot2();
                    }
                    if (shootGrade == 3) {
                        shootMusic.play();

                        player.shoot3();
                    }
                    if (shootGrade == 4) {
                        shootMusic.play();

                        player.shoot4();
                    }
                }, 300)

                // 每隔20ms刷新一下碰撞
                bulletCrash1 = setInterval(crashCheck, 20)//子弹与杂兵1碰撞

                //定时任务己方主角与杂兵1碰撞检测执行
                crash1 = setInterval(() => {
                    player.crashForOurAnd1();
                }, 20)
            }



        }

        // 新游戏
        function newgame() {
            location.reload();

        }


        // 创建道具
        /*
            属性：
                道具名
                图片节点
                图片
                x坐标
                y坐标
                速度
            行为：
                移动
                初始化 把图片节点添加到mian画布    
        */
        function prop(imgSrc, x, y, speed) {
            this.imgNode = document.createElement("img");
            this.imgSrc = imgSrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            // 初始化
            this.init = function () {
                this.imgNode.src = this.imgSrc;
                this.imgNode.style.position = "absolute";
                this.imgNode.style.left = this.x + "px";
                this.imgNode.style.top = this.y + "px";
                mainObj.appendChild(this.imgNode)
            }
            this.init();
            this.move = function () {
                this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
            }
        }

        // 创建道具1方法
        function createProp1() {
            var prop1 = new prop("img/Item/Item1.png", parseInt(Math.random() * 536), 2, 3);
            propArray.push(prop1);
        }
        // 创建道具2方法
        function createProp2() {
            var prop2 = new prop("img/Item/Item2.png", parseInt(Math.random() * 536), 2, 3);
            propArray.push(prop2);
        }
        // 创建道具3方法
        function createProp3() {
            var prop3 = new prop("img/Item/Item3.png", parseInt(Math.random() * 536), 2, 3);
            propArray.push(prop3);
        }
        // 创建道具4方法
        function createProp4() {
            var prop4 = new prop("img/Item/Item4.png", parseInt(Math.random() * 536), 2, 3);
            propArray.push(prop4);
        }


        // 道具移动方法
        function propMove() {
            for (var i = 0; i < propArray.length; i++) {
                propArray[i].move()
                // 判定道具超出边界，移除数组
                if (parseInt(propArray[i].imgNode.style.top) >= 910) {
                    // 将主画布中该道具清除
                    mainObj.removeChild(propArray[i].imgNode);
                    // 移除数组中该道具
                    propArray.splice(i, 1)
                }
            }
        }

        // 主角和道具碰撞检测
        crashForOurAndProp = function () {
            for (var i = 0; i < propArray.length; i++) {
                // 道具top
                var x = parseInt(propArray[i].imgNode.style.left);
                // 道具left
                var y = parseInt(propArray[i].imgNode.style.top);
                // 主角x
                var px = parseInt(player.imgNode.style.left)
                // 主角y
                var py = parseInt(player.imgNode.style.top)

                // console.log(x)
                if (px + 62 >= x && px <= x + 62 && py <= y + 62 && py + 62 >= y) {

                    if (propArray[i].imgSrc == 'img/Item/Item1.png') {
                        if (parseInt(playerBooldy.innerHTML) < 10) {
                            playerBooldy.innerHTML = parseInt(playerBooldy.innerHTML) + 1;
                        }
                    }
                    if (propArray[i].imgSrc == 'img/Item/Item2.png') {
                        if (parseInt(bom.innerHTML) < 3) {
                            bom.innerHTML = parseInt(bom.innerHTML) + 1;
                        }
                    }
                    if (propArray[i].imgSrc == 'img/Item/Item3.png') {
                        if (parseInt(shootGrade) < 4) {
                            shootGrade = parseInt(shootGrade) + 1;
                        }
                    }
                    if (propArray[i].imgSrc == 'img/Item/Item4.png') {
                        grade.innerHTML = parseInt(grade.innerHTML) + 50
                    }


                    // 移除道具
                    mainObj.removeChild(propArray[i].imgNode);
                    propArray.splice(i, 1);

                }
            }
        }
        setInterval(crashForOurAndProp, 30);



        // 创建敌方战机
        /*
            属性：
                图片节点
                图片
                x坐标
                y坐标
                速度
            行为：
                移动
                初始化 把图片节点添加到mian画布    
        */
        function SmallPlaneProto(imgSrc, x, y, speed, booldy) {
            this.imgNode = document.createElement("img");
            this.imgSrc = imgSrc;
            this.booldy = booldy;
            this.x = x;
            this.y = y;
            this.speed = speed;
            // 初始化
            this.init = function () {
                this.imgNode.src = this.imgSrc;
                this.imgNode.style.position = "absolute";
                this.imgNode.style.left = this.x + "px";
                this.imgNode.style.top = this.y + "px";
                mainObj.appendChild(this.imgNode)
            }
            this.init();
            this.move = function () {
                this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
            }
            this.moveN2 = function () {
                this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
                this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed / 2 + "px";
            }
            this.move3 = function () {
                // this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
                var x = parseInt(this.imgNode.style.left);
                var containerWidth = document.documentElement.clientWidth;
                // 判断是否处于右边界，如果是，则改变方向为从右到左
                if (x >= 1000 - parseInt(this.imgNode.style.left)) {
                    this.direction = "left";
                }
                // 判断是否处于左边界，如果是，则改变方向为从左到右
                else if (x <= 0) {
                    this.direction = "right";
                }

                // 根据方向更新 left 值
                if (this.direction === "right") {
                    this.imgNode.style.left = x + 5 + "px";
                } else {
                    this.imgNode.style.left = x - 5 + "px";
                }
            }
            this.shoot = function () {
                // 来执行发射子弹的事件
                var newBullet = new bulletProto1("img/子弹/第三.png", parseInt(this.imgNode.style.left) + 30,
                    parseInt(this.imgNode.style.top), 5);
                bulletArray1.push(newBullet);

            }
            this.shootN2 = function () {
                // 来执行发射子弹的事件
                var newBullet = new bulletProto1("img/子弹/第三.png", parseInt(this.imgNode.style.left) + 70,
                    parseInt(this.imgNode.style.top) + 70, 5);
                bulletArray1.push(newBullet);

            }
            this.shoot4 = function () {
                // 来执行发射子弹的事件杂兵4专属
                var newBullet1 = new bulletProto1("img/子弹/第三.png", parseInt(this.imgNode.style.left) + 15,
                    parseInt(this.imgNode.style.top), 5);
                bulletArray1.push(newBullet1);
                var newBullet2 = new bulletProto1("img/子弹/第三.png", parseInt(this.imgNode.style.left) + 30,
                    parseInt(this.imgNode.style.top), 5);
                bulletArray1.push(newBullet2);
                var newBullet3 = new bulletProto1("img/子弹/第三.png", parseInt(this.imgNode.style.left) + 35,
                    parseInt(this.imgNode.style.top), 5);
                bulletArray1.push(newBullet3);

            }

        }
        // 杂兵发射子弹
        function shootPlane2() {
            for (var i = 0; i < smallPlaneArray.length; i++) {
                if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵2.png') {
                    smallPlaneArray[i].shoot();
                }
                if (smallPlaneArray[i].imgSrc == 'img/杂兵/Enemy Plane N2.png') {
                    smallPlaneArray[i].shootN2();
                }
                if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵4.png') {
                    smallPlaneArray[i].shoot4();
                }
                if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵3.png') {
                    smallPlaneArray[i].shoot();
                }
                if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵5.png') {
                    smallPlaneArray[i].shoot4();
                }
            }
        }
        setInterval(shootPlane2, 2000)

        // todo 杂兵N4发射子弹


        // 创建敌方小飞机1方法
        function createSamllPlane1() {
            var smallPlane = new SmallPlaneProto("img/杂兵/杂兵1.png", parseInt(Math.random() * 536), 2, 3, 1)
            smallPlaneArray.push(smallPlane)
        }

        // 创建敌方小飞机2方法
        function createSamllPlane2() {
            var smallPlane = new SmallPlaneProto("img/杂兵/杂兵2.png", parseInt(Math.random() * 536), 2, 3, 3)
            smallPlaneArray.push(smallPlane)
        }

        // 创建敌方小飞机N1方法
        function createSamllPlaneN1() {
            var smallPlane = new SmallPlaneProto("img/杂兵/Enemy Plane N1.png", parseInt(Math.random() * 536), 2, 6, 2)
            smallPlaneArray.push(smallPlane)
        }
        // 创建敌方小飞机N2方法
        function createSamllPlaneN2() {
            var smallPlane = new SmallPlaneProto("img/杂兵/Enemy Plane N2.png", 0, 2, 3, 4)
            smallPlaneArray.push(smallPlane)
        }
        // 创建敌方小飞机3方法
        function createSamllPlane3() {
            var smallPlane = new SmallPlaneProto("img/杂兵/杂兵3.png", 0, 2, 3, 5)
            smallPlaneArray.push(smallPlane)
        }
        // 创建敌方小飞机4方法
        function createSamllPlane4() {
            var smallPlane = new SmallPlaneProto("img/杂兵/杂兵4.png", 0, 2, 3, 10)
            smallPlaneArray.push(smallPlane)
        }
        // 创建敌方小飞机5方法
        function createSamllPlane5() {
            var smallPlane = new SmallPlaneProto("img/杂兵/杂兵5.png", 0, 2, 3, 10)
            smallPlaneArray.push(smallPlane)
        }



        // 敌方小飞机移动方法
        function smallPlaneMove() {
            for (var i = 0; i < smallPlaneArray.length; i++) {
                // if(smallPlaneArray[i].imgNode.src)
                if (smallPlaneArray[i].imgSrc == 'img/杂兵/Enemy Plane N2.png') {
                    smallPlaneArray[i].moveN2();
                } else if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵3.png') {
                    smallPlaneArray[i].move3();
                } else if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵5.png') {
                    smallPlaneArray[i].move3();
                }
                else {
                    smallPlaneArray[i].move()
                }


                // 判定敌机超出边界，移除数组
                if (parseInt(smallPlaneArray[i].imgNode.style.top) >= 910) {
                    // 将主画布中该敌机清除
                    mainObj.removeChild(smallPlaneArray[i].imgNode);
                    // 移除数组中该对象
                    smallPlaneArray.splice(i, 1)
                }
            }
        }



        // Boss
        /*
            属性：
                图片节点
                图片
                x坐标
                y坐标
                50生命
            行为：
                发射子弹
                初始化 把图片节点添加到mian画布    
        */
        function boss1PlaneProto(imgSrc, x, y, booldy) {
            this.imgNode = document.createElement("img");
            this.imgSrc = imgSrc;
            this.x = x;
            this.y = y;
            this.booldy = booldy;
            this.init = function () {
                this.imgNode.src = this.imgSrc;
                this.imgNode.style.position = "absolute";
                this.imgNode.style.left = this.x + "px";
                this.imgNode.style.top = this.y + "px";
                mainObj.appendChild(this.imgNode);
            }
            this.init();

            // boss4发射子弹
            this.shoot = function () {
                var newBullet1 = new bulletProto1("img/子弹/Boss3子弹2.png", parseInt(this.imgNode.style.left) + 20,
                    parseInt(this.imgNode.style.top) + 130, 5);
                bulletArray1.push(newBullet1);
                var newBullet2 = new bulletProto1("img/子弹/Boss3子弹1.png", parseInt(this.imgNode.style.left) + 50,
                    parseInt(this.imgNode.style.top) + 130, 5);
                bulletArray1.push(newBullet2);
                var newBullet3 = new bulletProto1("img/子弹/Boss3子弹2.png", parseInt(this.imgNode.style.left) + 80,
                    parseInt(this.imgNode.style.top) + 130, 5);
                bulletArray1.push(newBullet3);
                var newBullet4 = new bulletProto1("img/子弹/Boss3子弹1.png", parseInt(this.imgNode.style.left) + 110,
                    parseInt(this.imgNode.style.top) + 130, 5);
                bulletArray1.push(newBullet4);
                var newBullet5 = new bulletProto1("img/子弹/Boss3子弹2.png", parseInt(this.imgNode.style.left) + 140,
                    parseInt(this.imgNode.style.top) + 130, 5);
                bulletArray1.push(newBullet5);
                var newBullet6 = new bulletProto1("img/子弹/Boss3子弹1.png", parseInt(this.imgNode.style.left) + 170,
                    parseInt(this.imgNode.style.top) + 130, 5);
                bulletArray1.push(newBullet6);
                var newBullet7 = new bulletProto1("img/子弹/Boss3子弹2.png", parseInt(this.imgNode.style.left) + 200,
                    parseInt(this.imgNode.style.top) + 130, 5);
                bulletArray1.push(newBullet7);
            };

            // 与主角碰撞检测
            this.crashForOurAndBoss = function () {
                // TODO 主角爆炸
            }
        }





        // 玩家飞机-主角
        /*
            属性：
                图片节点
                图片
                x坐标
                y坐标
                速度
            行为：
                移动 => 上下左右
                发射子弹
                初始化 把图片节点添加到mian画布    
        */
        function playerPlaneProto(imgSrc, x, y, speed) {
            this.imgNode = document.createElement("img");
            this.imgSrc = imgSrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.init = function () {
                this.imgNode.src = this.imgSrc;
                this.imgNode.style.position = "absolute";
                this.imgNode.style.left = this.x + "px";
                this.imgNode.style.top = this.y + "px";
                mainObj.appendChild(this.imgNode);
            }
            this.init();
            // 向左移动
            this.moveLeft = function () {
                // 判断边界
                if (parseInt(this.imgNode.style.left) - this.speed < 0) {
                    this.imgNode.style.left = 0;
                } else {
                    this.imgNode.style.left = parseInt(this.imgNode.style.left) - this.speed + "px"
                }
            }
            // 向右移动
            this.moveRight = function () {
                if (parseInt(this.imgNode.style.left) + this.speed > 536) {
                    this.imgNode.style.left = 536
                } else {
                    this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed + "px"
                }
            }
            // 向上移动
            this.moveUp = function () {
                if (parseInt(this.imgNode.style.top) - this.speed < 0) {
                    this.imgNode.style.top = 0
                } else {
                    this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + "px"
                }
            }
            // 向下移动
            this.moveDownt = function () {
                if (parseInt(this.imgNode.style.top) + this.speed > 846) {
                    this.imgNode.style.top = 846
                } else {
                    this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px"
                }
            }
            // 主角发射子弹
            this.shoot = function () {
                shootMusic.playbackRate = 5;

                // 根据按键 来执行发射子弹的事件
                var newBullet = new bulletProto("img/子弹/1.png", parseInt(this.imgNode.style.left) + 15,
                    parseInt(this.imgNode.style.top) - 32, 10);
                bulletArray.push(newBullet);
            }
            // 主角发射子弹2
            this.shoot2 = function () {
                var newBullet = new bulletProto("img/子弹/2.png", parseInt(this.imgNode.style.left) + 15,
                    parseInt(this.imgNode.style.top) - 32, 10);
                bulletArray.push(newBullet);

            }
            // 主角发射子弹3
            this.shoot3 = function () {
                var newBullet = new bulletProto("img/子弹/3.png", parseInt(this.imgNode.style.left) + 8,
                    parseInt(this.imgNode.style.top) - 32, 10);
                bulletArray.push(newBullet);
            }
            // 主角发射子弹4
            this.shoot4 = function () {
                var newBullet = new bulletProto("img/子弹/4.png", parseInt(this.imgNode.style.left) + 12,
                    parseInt(this.imgNode.style.top) - 32, 10);
                bulletArray.push(newBullet);

            }


            // 与杂兵1碰撞检测
            // 主角和杂兵1碰撞函数
            this.crashForOurAnd1 = function () {
                for (var i = 0; i < smallPlaneArray.length; i++) {
                    // 杂兵1顶部
                    var plTop = parseInt(smallPlaneArray[i].imgNode.style.top);
                    // 杂兵1左边
                    var plLeft = parseInt(smallPlaneArray[i].imgNode.style.left);
                    // 主角x
                    var playerx = parseInt(this.imgNode.style.left)
                    // 主角y
                    var playery = parseInt(this.imgNode.style.top)

                    if (playerx + 64 >= plLeft && playerx <= plLeft + 64 && playery >= plTop && playery <= plTop + 64) {

                        // 主角血量-1
                        playerBooldy.innerHTML = parseInt(playerBooldy.innerHTML) - 1;
                        // todo
                        // mainObj.removeChild(bulletArray.imgNode)
                        // 杂兵1爆炸
                        // bulletArray=[];
                        bao.play();
                        // 小飞机爆炸图片替换
                        smallPlaneArray[i].imgNode.src = "img/子弹/爆炸.png"
                        // 杂兵1血量-1
                        smallPlaneArray[i].booldy = 0;
                        // 移除敌机
                    }


                }
            }
            // 主角和敌方子弹碰撞函数
            this.crashForOurAndshoot = function () {
                for (var i = 0; i < bulletArray1.length; i++) {
                    // 地方子弹top
                    var x = parseInt(bulletArray1[i].imgNode.style.left);
                    // 敌方子弹left
                    var y = parseInt(bulletArray1[i].imgNode.style.top);
                    // 主角x
                    var px = parseInt(this.imgNode.style.left)
                    // 主角y
                    var py = parseInt(this.imgNode.style.top)

                    // console.log(x)
                    if (x >= px && x <= px + 64 && y + 10 >= py && y <= py + 64) {

                        //   console.log("被打了")
                        // 主角血量-1
                        playerBooldy.innerHTML = parseInt(playerBooldy.innerHTML) - 1;
                        // 移除子弹
                        mainObj.removeChild(bulletArray1[i].imgNode);
                        bulletArray1.splice(i, 1);

                    }
                }
            }
        }
        var player = new playerPlaneProto("img/主角.png", 250, 680, 6)

        setInterval(() => { player.crashForOurAndshoot(); }, 20)



        // 监听键盘
        document.body.onkeydown = function () {
            var e = window.event || arguments[0];
            // console.log(e)
            if (e.keyCode == 37) {
                // player.moveLeft();
                // console.log("向左移动")
                leftBtn = true;
            }
            if (e.keyCode == 38) {
                // player.moveUp();
                // console.log("向上移动")
                upBtn = true;
            }
            if (e.keyCode == 39) {
                // player.moveRight();
                // console.log("向右移动")
                rightBtn = true;
            }
            if (e.keyCode == 40) {
                // player.moveDownt();
                // console.log("向下移动")
                downBtn = true;
            }
            if (e.keyCode == 32) {
                if (bom.innerHTML > 0) {
                    triggerBombExplosion();


                    bom.innerHTML = bom.innerHTML - 1;
                    boom.play();
                    for (var i = 0; i < smallPlaneArray.length; i++) {
                        mainObj.removeChild(smallPlaneArray[i].imgNode);
                        grade.innerHTML = parseInt(grade.innerHTML) + 10
                    }
                    smallPlaneArray.splice(0, smallPlaneArray.length);
                }


            }
        }

        // 监听键盘抬起，关闭运行移动飞机
        document.body.onkeyup = function () {
            var e = window.event || arguments[0];
            if (e.keyCode == 37) {
                leftBtn = false;
            }
            if (e.keyCode == 38) {
                upBtn = false;
            }
            if (e.keyCode == 39) {
                rightBtn = false;
            }
            if (e.keyCode == 40) {
                downBtn = false;
            }
            if (e.keyCode == 32) {
                konggeBtn = false;
            }
        }

        // 优化飞机延迟
        function ctrlPlay() {
            if (leftBtn == true) {
                player.moveLeft();
            }
            if (rightBtn == true) {
                player.moveRight();
            }
            if (downBtn == true) {
                player.moveDownt();
            }
            if (upBtn == true) {
                player.moveUp();
            }
            if (konggeBtn == true) {
                // 炸弹声音

            }
        }


        // 主角子弹模板
        function bulletProto(imgSrc, x, y, speed) {
            this.imgNode = document.createElement("img");
            this.imgSrc = imgSrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.init = function () {
                this.imgNode.src = this.imgSrc;
                this.imgNode.style.position = "absolute";
                this.imgNode.style.left = this.x + "px";
                this.imgNode.style.right = this.y + "px";
                this.imgNode.style.top = this.y + "px";
                mainObj.appendChild(this.imgNode);
            }
            this.init();
            this.move = function () {
                this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + "px";
            }
        }
        // 敌方子弹模板
        function bulletProto1(imgSrc, x, y, speed) {
            this.imgNode = document.createElement("img");
            this.imgSrc = imgSrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.init = function () {
                this.imgNode.src = this.imgSrc;
                this.imgNode.style.position = "absolute";
                this.imgNode.style.left = this.x + "px";
                this.imgNode.style.right = this.y + "px";
                this.imgNode.style.top = this.y + "px";
                mainObj.appendChild(this.imgNode);
            }
            this.init();
            this.move = function () {
                this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
            }
        }
        // 遍历子弹数组，进行调用子弹移动
        function bulletMove() {
            for (var i = 0; i < bulletArray.length; i++) {
                bulletArray[i].move();
                // 判断子弹是否越界，越界则从数组删除
                if (parseInt(bulletArray[i].imgNode.style.top) <= 0) {
                    mainObj.removeChild(bulletArray[i].imgNode);
                    bulletArray.splice(i, 1)
                }
            }

        }

        // 遍历敌方子弹数组，进行调用子弹移动
        function bulletMove1() {
            for (var i = 0; i < bulletArray1.length; i++) {
                bulletArray1[i].move();
                // 判断子弹是否越界，越界则从数组删除
                if (parseInt(bulletArray1[i].imgNode.style.top) >= 850) {
                    mainObj.removeChild(bulletArray1[i].imgNode);
                    bulletArray1.splice(i, 1)
                }
            }
        }








        setInterval(() => {
            if (playerBooldy.innerHTML <= 0) {
                isstop = true;
                // alert("游戏结束,shibai！");
                if (parseInt(grade.innerHTML) > grade4Three) {
                    if (parseInt(grade.innerHTML) > grade4Second) {
                        if (parseInt(grade.innerHTML) > parseInt(grade4Max)) {
                            // 记录最高分
                            localStorage.setItem('grade4Max', grade.innerHTML);
                        } else {
                            localStorage.setItem('grade4Second', grade.innerHTML);
                        }
                    } else {
                        localStorage.setItem('grade4Three', grade.innerHTML);
                    }


                }
                menu.style.display = "block";
                // 暂停创建敌方飞机1的创建
                clearInterval(smallPlane1Timer);
                // 暂停创建敌方飞机2的创建
                clearInterval(smallPlane2Timer);
                clearInterval(smallPlaneN1Timer);
                clearInterval(smallPlaneN2Timer);
                clearInterval(smallPlane3Timer);
                clearInterval(smallPlane4Timer);
                // 暂停敌方飞机的运动
                clearInterval(smallPlaneMoveTimer);
                // 暂停敌方飞机的子弹移动

                clearInterval(bulletMove1Timer);
                // 暂停键盘监听
                clearInterval(ctrlPlayTimer);
                // 暂停子弹移动
                clearInterval(bulletMoveTimer);
                // 暂停主角子弹射击
                clearInterval(shootTimer);

                // 暂停子弹与杂兵1碰撞检测
                clearInterval(bulletCrash1);
                // 暂停主角与杂兵1碰撞检测
                clearInterval(crash1);
                // 暂停boss移动还有道具刷新
                clearInterval(prop1Timer);
                clearInterval(prop2Timer);
                clearInterval(prop3Timer);
                clearInterval(prop4Timer);
                clearInterval(propMoveTimer);


                // 暂停音乐音效

                startbgMusic.pause();
                shootMusic.pause();

            }
        }, 20)

        // 子弹和杂兵1碰撞函数
        function crashCheck() {
            for (var i = 0; i < smallPlaneArray.length; i++) {
                for (var j = 0; j < bulletArray.length; j++) {
                    // 子弹坐标x
                    var btLeft = parseInt(bulletArray[j].imgNode.style.left);
                    // 子弹顶部y
                    var btTop = parseInt(bulletArray[j].imgNode.style.top);
                    // 杂兵1顶部
                    var plTop = parseInt(smallPlaneArray[i].imgNode.style.top);
                    // 杂兵1左边
                    var plLeft = parseInt(smallPlaneArray[i].imgNode.style.left);
                    // 杂兵1右边
                    // var plRight = parseInt(smallPlaneArray[i].imgNode.style.right);
                    // console.log(plLeft)
                    if (btLeft >= plLeft && btLeft <= plLeft + 64 && btTop >= plTop && btTop <= plTop + 64) {
                        // console.log("jizhong")
                        // 移除子弹
                        mainObj.removeChild(bulletArray[j].imgNode);
                        bulletArray.splice(j, 1);
                        // 小飞机爆炸图片替换

                        // 杂兵1血量-1
                        if (shootGrade == 1) {
                            smallPlaneArray[i].booldy = parseInt(smallPlaneArray[i].booldy) - 1;
                        }
                        if (shootGrade == 2) {
                            smallPlaneArray[i].booldy = parseInt(smallPlaneArray[i].booldy) - 2;
                        }
                        if (shootGrade == 3) {
                            smallPlaneArray[i].booldy = parseInt(smallPlaneArray[i].booldy) - 3;
                        }
                        if (shootGrade == 4) {
                            smallPlaneArray[i].booldy = parseInt(smallPlaneArray[i].booldy) - 4;
                        }


                    }
                }
            }
        }



        // 每隔300ms刷新一下敌方飞机血量
        setInterval(function () {
            for (var i = 0; i < smallPlaneArray.length; i++) {

                if (smallPlaneArray[i].booldy <= 0) {
                    var plLeft = parseInt(smallPlaneArray[i].imgNode.style.left);
                    var plTop = parseInt(smallPlaneArray[i].imgNode.style.top);
                    if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵1.png') {
                        // grade++;
                        grade.innerHTML = parseInt(grade.innerHTML) + 10
                        // console.log(this.grade)
                    }
                    if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵2.png') {
                        // grade++;
                        grade.innerHTML = parseInt(grade.innerHTML) + 15
                        // console.log(this.grade)
                    }
                    if (smallPlaneArray[i].imgSrc == 'img/杂兵/Enemy Plane N1.png') {
                        // grade++;
                        grade.innerHTML = parseInt(grade.innerHTML) + 12
                        // console.log(this.grade)
                    }
                    if (smallPlaneArray[i].imgSrc == 'img/杂兵/Enemy Plane N2.png') {
                        // grade++;
                        grade.innerHTML = parseInt(grade.innerHTML) + 18
                        // console.log(this.grade)
                    }
                    if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵3.png') {
                        // grade++;
                        grade.innerHTML = parseInt(grade.innerHTML) + 20
                        // console.log(this.grade)
                    }
                    if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵4.png') {
                        // grade++;
                        grade.innerHTML = parseInt(grade.innerHTML) + 25
                        // console.log(this.grade)
                    }
                    if (smallPlaneArray[i].imgSrc == 'img/杂兵/杂兵5.png') {
                        // grade++;
                        grade.innerHTML = parseInt(grade.innerHTML) + 30
                        // console.log(this.grade)
                    }
                    // 开始动画
                    explode();

                    // 重置动画，以便再次执行
                    reset();

                    // 在需要改变位置的地方调用 changePosition 函数，并传入对应的 x 和 y 值
                    changePosition(plLeft, plTop);
                    // 杂兵1血量-1
                    mainObj.removeChild(smallPlaneArray[i].imgNode);
                    smallPlaneArray.splice(i, 1)
                    // 移除敌机
                    bao.play();



                }
            }
        }, 5)

        function createBoss() {
            if (grade.innerHTML >= 600) {
                clearInterval(bossFlag)
                bossTime();
            }
        }

        // 打Boss时间
        function bossTime() {

            isFunctionExecuted = true

            var boss1move = setInterval(() => {

                if (isstop == false) {


                }

            }, 200)

            // 杂兵不再生成，音乐替换
            // 暂停创建敌方飞机1的创建
            clearInterval(smallPlane1Timer);
            // 暂停创建敌方飞机2的创建
            clearInterval(smallPlane2Timer);
            clearInterval(smallPlaneN1Timer);
            clearInterval(smallPlaneN2Timer);
            clearInterval(smallPlane3Timer);
            clearInterval(smallPlane4Timer);
            clearInterval(smallPlane5Timer);

            startbgMusic.src = 'audio/背景音乐/boss战.mp3';
            startbgMusic.play();

            // 创建boss1
            var boss1 = new boss1PlaneProto("img/boos/Boss3new.png", 160, 1, 180)



            var boss1shoot = setInterval(() => {
                if (isstop == false) {
                    boss1.shoot();
                    setTimeout(() => {
                        boss1.shoot();
                    }, 200);
                    boss1.shoot();
                }
            }, 4000);


            var bossisalive = setInterval(() => {
                if (bossBloody <= 0) {
                    clearInterval(boss1shoot);
                    // 暂停bossyidong
                    mainObj.removeChild(boss1.imgNode);
                    boss = null;
                    clearInterval(bossisalive);

                }
            }, 300)



            setInterval(() => {
                if (isFunctionExecuted == true) {
                    // 主角与boss碰撞
                    var px = parseInt(player.imgNode.style.left)
                    // 主角y
                    var py = parseInt(player.imgNode.style.top)

                    var bx = parseInt(boss1.imgNode.style.left)
                    var by = parseInt(boss1.imgNode.style.top)
                    if (px + 64 >= bx && px <= bx + 64 && py >= by && py <= by + 64) {
                        playerBooldy.innerHTML = 0;
                    }
                }

            }, 20)


            // 定时检验boss生命
            setInterval(function () {
                for (var i = 0; i < bulletArray.length; i++) {
                    // 子弹坐标x
                    var x = parseInt(bulletArray[i].imgNode.style.left);
                    // 子弹顶部y
                    var y = parseInt(bulletArray[i].imgNode.style.top);
                    // 敌机x
                    var bx = parseInt(boss1.imgNode.style.left)
                    // 敌机y
                    var by = parseInt(boss1.imgNode.style.top)
                    // x >= bx && x <= bx + bossWidth && y >= by && y <= by + bossHeight
                    // if (x >= 70 && x <= 500 && y <= 245 && y >= 0) {
                    if (x >= bx && x <= bx + 264 && y >= by && y <= by + 264) {

                        // 移除子弹
                        mainObj.removeChild(bulletArray[i].imgNode);
                        bulletArray.splice(i, 1);
                        if (shootGrade == 1) {
                            bossBloody = bossBloody - 1;
                        }
                        if (shootGrade == 2) {
                            bossBloody = bossBloody - 2;
                        }
                        if (shootGrade == 3) {
                            bossBloody = bossBloody - 3;
                        }
                        if (shootGrade == 4) {
                            bossBloody = bossBloody - 4;
                        }
                        console.log(bossBloody);
                        if (bossBloody <= 0) {
                            grade.innerHTML = parseInt(grade.innerHTML) + 300
                            localStorage.setItem('5', "yes");
                            // alert("you win!")  
                            // alert("游戏结束,shibai！");
                            if (parseInt(grade.innerHTML) > grade4Three) {
                                if (parseInt(grade.innerHTML) > grade4Second) {
                                    if (parseInt(grade.innerHTML) > parseInt(grade4Max)) {
                                        // 记录最高分
                                        localStorage.setItem('grade4Max', grade.innerHTML);
                                    } else {
                                        localStorage.setItem('grade4Second', grade.innerHTML);
                                    }
                                } else {
                                    localStorage.setItem('grade4Three', grade.innerHTML);
                                }


                            }
                            menu2.style.display = "block";
                            // 暂停创建敌方飞机1的创建
                            clearInterval(smallPlane1Timer);
                            // 暂停创建敌方飞机2的创建
                            clearInterval(smallPlane2Timer);
                            clearInterval(smallPlaneN1Timer);
                            clearInterval(smallPlaneN2Timer);
                            // 暂停敌方飞机的运动
                            clearInterval(smallPlaneMoveTimer);
                            clearInterval(smallPlane3Timer);
                            clearInterval(smallPlane4Timer);
                            clearInterval(smallPlane5Timer);
                            // 暂停敌方飞机的子弹移动

                            clearInterval(bulletMove1Timer);
                            // 暂停键盘监听
                            clearInterval(ctrlPlayTimer);
                            // 暂停子弹移动
                            clearInterval(bulletMoveTimer);
                            // 暂停主角子弹射击
                            clearInterval(shootTimer);

                            // 暂停子弹与杂兵1碰撞检测
                            clearInterval(bulletCrash1);
                            // 暂停主角与杂兵1碰撞检测
                            clearInterval(crash1);
                            clearInterval(prop1Timer);
                            clearInterval(prop2Timer);
                            clearInterval(prop3Timer);
                            clearInterval(prop4Timer);
                            clearInterval(propMoveTimer);


                            // 暂停音乐音效

                            startbgMusic.pause();
                            shootMusic.pause();
                        }
                    }

                    if (playerBooldy.innerHTML <= 0) {

                        // alert("游戏结束,shibai！");
                        if (parseInt(grade.innerHTML) > grade4Three) {
                            if (parseInt(grade.innerHTML) > grade4Second) {
                                if (parseInt(grade.innerHTML) > parseInt(grade4Max)) {
                                    // 记录最高分
                                    localStorage.setItem('grade4Max', grade.innerHTML);
                                } else {
                                    localStorage.setItem('grade4Second', grade.innerHTML);
                                }
                            } else {
                                localStorage.setItem('grade4Three', grade.innerHTML);
                            }


                        }
                        menu.style.display = "block";
                        // 暂停创建敌方飞机1的创建
                        clearInterval(smallPlane1Timer);
                        // 暂停创建敌方飞机2的创建
                        clearInterval(smallPlane2Timer);
                        clearInterval(smallPlaneN1Timer);
                        clearInterval(smallPlaneN2Timer);
                        // 暂停敌方飞机的运动
                        clearInterval(smallPlaneMoveTimer);
                        clearInterval(smallPlane3Timer);
                        clearInterval(smallPlane4Timer);
                        clearInterval(smallPlane5Timer);
                        // 暂停敌方飞机的子弹移动

                        clearInterval(bulletMove1Timer);
                        // 暂停键盘监听
                        clearInterval(ctrlPlayTimer);
                        // 暂停子弹移动
                        clearInterval(bulletMoveTimer);
                        // 暂停主角子弹射击
                        clearInterval(shootTimer);

                        // 暂停子弹与杂兵1碰撞检测
                        clearInterval(bulletCrash1);
                        // 暂停主角与杂兵1碰撞检测
                        clearInterval(crash1);


                        // 暂停音乐音效

                        startbgMusic.pause();
                        shootMusic.pause();

                    }

                }

            }, 5)

        }


        // // 开启Boss时间10s
        // setTimeout(bossTime, 5000);
        var bossFlag = setInterval(createBoss, 20);

        // 更新精灵图的位置
        function updateSpritePosition() {
            var sprite = document.querySelector('.animation');

            var px = parseInt(player.imgNode.style.left)
            var py = parseInt(player.imgNode.style.top)

            sprite.style.left = (px + 18) + 'px'; // 减去精灵图的宽度，使精灵图的左侧与飞机尾部对齐
            sprite.style.top = (py + 52) + 'px'; // 减去精灵图的高度的一半，使精灵图的中心与飞机尾部水平对齐
        }
        // 定期更新精灵图的位置
        setInterval(updateSpritePosition, 10); // 每隔100毫秒更新一次精灵图的位置

    </script>
</body>

</html>